<template>
	<view class="container">
		<u-sticky :enable="enable">
			<view class="steps">
				<u-steps :list="numList" :current="current" mode="number" active-color="white" un-active-color="white">
				</u-steps>
			</view>
		</u-sticky>
		<view class="paramtersList">
			<u-cell-group :border="false">
				<u-cell-item :title="item.productAttrName" :value="item.productAttrValue" :arrow="false"
					:value-style="valueStyle" :title-style="titleStyle" v-for="(item,index) in paramtersList"
					:key="index" @click="edit(item)">
					<u-image class="trash" slot="right-icon" :src="src" width="26" height="29"
						@click.native.stop="delPara(item.id)"></u-image>
				</u-cell-item>
				<u-cell-item :border-bottom="false" :arrow="false">
					<u-icon slot="icon" size="56" name="plus-circle" @click="addPara()"></u-icon>
				</u-cell-item>
			</u-cell-group>
			<u-empty text="暂无数据" mode="list" v-if="paramtersList.length<1"></u-empty>
		</view>

		<view class="footer">
			<u-row gutter="16">
				<u-col span="12">
					<u-button type="primary" class="btn" @click="baocun">保存</u-button>
				</u-col>
			</u-row>
		</view>

		<u-modal v-model="show" :zoom="false" show-cancel-button confirm-color="#1F6ECF" content="此操作将永久删除该参数, 是否继续?"
			@confirm="confirm"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				enable: true,
				current: 2,
				numList: [{
					name: '基本信息'
				}, {
					name: '商品图片'
				}, {
					name: '商品参数'
				}, {
					name: '规格库存'
				}],
				src: require('@/static/shoping/trash.png'),
				valueStyle: {
					color: '#666',
					fontSize: '28rpx'
				},
				titleStyle: {
					color: '#000',
					fontSize: '28rpx'
				},
				productId: "",
				paramtersList: [],
				show: false,
				paramID: ''
			}
		},
		onShow() {
			this.enable = true;
		},
		onHide() {
			this.enable = false;
		},
		onLoad(option) {
			this.productId = option.id;
		},
		mounted() {
			this.getData();
		},
		methods: {
			getData() {
				this.$u.api.attrValueInfo({
					id: this.productId
				}).then(res => {
					this.paramtersList = res.data.productAttrValues;
				})
			},
			//删除商品属性
			delPara(id) {
				this.show = true;
				this.paramID = id
			},
			//删除商品属性
			confirm() {
				this.$u.api.delAttrValue({
					id: this.paramID
				}).then(res => {
					if (res.code == 0) {
						this.$u.toast('删除成功！');
						this.getData();
					} else {
						this.$u.toast(res.msg);
					}
				})
			},
			addPara() {
				uni.navigateTo({
					url: '/pages/line/shoping/addParamters?productId=' + this.productId
				})
			},
			edit(item) {
				uni.navigateTo({
					url: '/pages/line/shoping/addParamters?productId=' + item.productId + '&id=' + item.id +
						'&productAttrName=' + item.productAttrName + '&productAttrValue=' + item.productAttrValue
				})
			},
			baocun(){
				uni.navigateTo({
					url:"/pages/line/shoping/sku?productId=" + this.productId
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.steps {
		background-color: #357cd4;
		padding: 30rpx;
	}

	.trash {
		margin-left: 30rpx;
	}

	.paramtersList {
		height: calc(100vh - 480rpx);
		overflow-y: scroll;
	}

	.footer {
		padding: 30rpx;
		position: fixed;
		bottom: 30rpx;
		left: 0;
		right: 0;

		.btn {
			background: #1F6ECF;
			box-shadow: 0px 12rpx 16rpx 0px rgba(28, 100, 224, 0.32);
			border-radius: 43rpx;
		}

		.tips {
			color: red;
			font-size: 24rpx;
			padding-top: 30rpx;
		}
	}
</style>
